<script lang="ts" setup>
	import utils from '@/utils'
	import { useRouter, useRoute } from 'vue-router'
	const router = useRouter()
	const toDetail = (id : number) => {
		router.push({ name: 'newsDetail', query: { id: id } })
	}
	const sceneList = [{
		img: 'index/t2.svg',
		title: '装配',
		text: '可用于装配生产线上对零件或部件的装配',
	}, {
		img: 'index/t3.svg',
		title: '螺丝锁付',
		text: '为更精准而生，给客户稳定而高精度的品质保证',
	}, {
		img: 'index/t4.svg',
		title: '喷涂',
		text: '能够针对不同基层材料、涂层材料和工件外形提供机器人一站式解决方案',
	}, {
		img: 'index/t5.svg',
		title: '打磨抛光',
		text: '让打磨抛光应用更简单、更高效',
	}, {
		img: 'index/t6.svg',
		title: '码垛',
		text: '简化操作，提升效率，生产线上的码垛专家',
	}, {
		img: 'index/t7.svg',
		title: '焊接',
		text: '焊匠出手，让焊接良品率直线提升',
	}, {
		img: 'index/t8.svg',
		title: '检测',
		text: '能够根据不同产品要求快速切换生产模式，适应多品种，小批量生产',
	}, {
		img: 'index/t9.svg',
		title: '机床上下料',
		text: '快准稳，分拣作业高效又智能',
	}]

	const newsList = [{
		img: 'index/t10.jpg',
		title: '非夕参与第八届中国制造强国论坛，签署多项战略合作协议',
		text: '2023年11月25-26日，由保定市人民政府、河北省工业和信息化厅、中国制造强国论坛组委会主办的“2023（第八届）中国制造强国论坛”在中国·保定隆重举办。非夕创始人兼CEO王世全出席论坛，并发表演讲《仿人化机器人与人工智能技术驱动下的跨行业变革》。非夕科技副总裁陈仙勇、副总裁胡晓平、创新研究业务中心负责人王竞凡出席，并代表非夕与立中集团、长城精工签署战略合作协议。',
	},
	{
		img: 'index/t11.png',
		title: 'ITES 2024 深圳工业展',
		text: '2024深圳机器人展,展览会将于华南地区国际会展中心举办的国际博览中心隆重举办,将在国际贸易与观众的交流与国际交流,是国内国际展会的国际性展盛会.',
	}, {
		img: 'index/t12.png',
		title: '慕尼黑上海电子生产设备展',
		text: '此次展会规模将达近75,000平方米，吸引了来自世界各地超900家创新企业加入，携各自前沿技术与产品重磅亮相。这股强大的合力推动着电子制造业由量的增长转向质的飞跃，无论是智能设备的研发、制造系统的整合，还是新型材料的应用推广，这些创新力量正在深度改写电子制造业的传统格局，以技术为支点撬动整个行业的质量跃升和结构优化。',
	}, {
		img: 'index/t13.png',
		title: '工业和信息化部装备工业发展中心联合非夕科技共同推出全国首部《自适应机器人创新发展蓝皮书》',
		text: '近日，工业和信息化部装备工业发展中心联合自适应机器人行业代表性企业公司非夕科技，推出了全国首部《自适应机器人创新发展蓝皮书》（下称“蓝皮书”）。蓝皮书中，对自适应机器人的概念、技术要点，行业上下游产业链，全球发展格局等都做了全面阐述，也对这一品类的机器人未来发展可能会遇到的挑战进行了分析。',
	}]
</script>

<template>
	<div class="content">
		<div class="header">
			<div class="header-left">
				<div class="title">
					协作机器人
				</div>
				<div class="text">
					协作机器人，顾名思义，就是在机器人与人可以在生产线上协同作战，充分发挥机器人的效率及人类的智能。这种机器人不仅性价比高，而且安全方便，能够极大地促进制造企业的发展。
				</div>
				<div class="btn-box">
					<a-button type="primary">
						了解详情
					</a-button>
				</div>
			</div>
			<div class="header-right">
				<img src="../../assets/image/index/t1.png" class="img">
			</div>
		</div>
		<div class="item item1">
			<div class="title">
				应用场景
			</div>
			<div class="text">
				采用最新设计结合高精尖技术，适用于更多领域更多场景，将复杂应用简单化
			</div>
			<div class="item1-list">
				<div v-for="(li, index) in sceneList" :key="index" class="li">
					<img :src="utils.getImg(li.img)" class="img">
					<div class="li-title">
						{{ li.title }}
					</div>
					<div class="li-text">
						{{ li.text }}
					</div>
				</div>
			</div>
		</div>
		<div class="item item2">
			<div class="title">
				产品理念
			</div>
			<div class="text">
				科技改变生活，为更多产业赋能
			</div>
			<div class="item2-content">
				<img src="../../assets/image/index/t14.jpg" class="img">
				<div class="item2-right">
					<div class="right-title">
						简化工作，高效协作
					</div>
					<div class="right-text">
						通过自动化和智能化技术，促进团队成员的高效协作与沟通。这些产品旨在简化重复性工作，提供决策支持，并整合跨平台工具，以提升工作效率和团队合作能力。
					</div>
					<div class="right-text">
						通过自动化流程和智能决策支持，协作机器人可以解放团队成员的时间和精力，让他们更专注于创造性的工作。同时，实时的协作与沟通工具也使得团队成员可以随时随地进行有效的沟通和协作，促进信息共享和问题解决。最终，协作机器人产品的目标是构建一个高效、智能的工作环境，使团队能够更好地协同工作、共享信息并完成任务。
					</div>
					<div class="btn-box">
						<a-button type="primary">
							了解详情
						</a-button>
					</div>
				</div>
			</div>
		</div>
		<div class="item item3">
			<div class="title">
				最新资讯
			</div>
			<div class="text">
				协作机器人最新动态尽在掌握
			</div>
			<div class="item3-list">
				<div v-for="(li, index) in newsList" :key="index" class="li" @click="toDetail(index)">
					<div class="img-box">
						<img :src="utils.getImg(li.img)" class="img">
					</div>
					<div class="li-content">
						<div class="li-title">
							{{ li.title }}
						</div>
						<div class="li-text">
							{{ li.text }}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.content {}

	.header {
		width: 1280px;
		margin: 0 auto;
		padding: 100px 0 80px 0;
		display: flex;
		justify-content: space-between;

		.header-left {
			width: 550px;
			padding-top: 100px;

			.title {
				font-size: 38px;
				font-weight: bold;
			}

			.text {
				margin-top: 25px;
				color: #495770;
				line-height: 25px;
				font-size: 18px;
			}

			.btn-box {
				margin-top: 40px;
			}
		}

		.header-right {
			.img {
				width: 700px;
				height: 350px;
			}
		}
	}

	.item {
		width: 1280px;
		margin: 0 auto;
		padding: 80px 0;

		.title {
			font-size: 32px;
			font-weight: bold;
			text-align: center;
		}

		.text {
			margin-top: 25px;
			color: #495770;
			line-height: 25px;
			text-align: center;
		}
	}

	.item1 {
		.item1-list {
			margin-top: 40px;
			padding: 0 100px;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.li {
				margin: 10px 0;
				width: 250px;
				height: 275px;
				padding: 30px 30px 20px 30px;
				display: flex;
				flex-direction: column;
				align-items: center;
				box-shadow: 0px 0px 10px 0px rgba(22, 119, 255, 0.1);
				border-radius: 10px;

				.img {
					background-color: #1677ff;
					border-radius: 50%;
					padding: 10px;
				}

				.li-title {
					font-size: 18px;
					font-weight: bold;
					margin-top: 25px;
				}

				.li-text {
					color: #495770;
					text-align: center;
					margin-top: 20px;
					line-height: 25px;
				}
			}

			.li:hover {
				animation: li-padding 0.3s linear forwards;
			}

			@keyframes li-padding {
				0% {
					padding: 30px 30px 20px 30px;
					border: 2px solid rgba(22, 119, 255, 0);
				}

				100% {
					padding: 20px 30px 20px 30px;
					border: 2px solid rgba(22, 119, 255, 1);
				}
			}

		}
	}

	.item2 {
		.item2-content {
			display: flex;
			margin-top: 40px;
			position: relative;

			.img {
				width: 700px;
				height: 520px;
			}

			.item2-right {
				width: 635px;
				height: 440px;
				padding: 58px 50px;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
				position: absolute;
				right: 40px;
				top: 40px;
				background: #ffffff;
				border-right: #1677ff solid 15px;
				border-radius: 2px;

				.right-title {
					font-size: 32px;
					font-weight: bold;
				}

				.right-text {
					margin-top: 25px;
					line-height: 25px;
					color: #495770;
					text-indent: 2em;
				}

				.btn-box {
					margin-top: 25px;
				}
			}
		}
	}

	.item3 {
		.item3-list {
			margin-top: 40px;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.li {
				width: 300px;
				display: flex;
				flex-direction: column;
				align-items: center;
				overflow: hidden;
				cursor: pointer;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);

				.img-box {
					width: 300px;
					height: 180px;
					overflow: hidden;

					.img {
						width: 300px;
						height: 180px;
					}
				}

				.li-content {
					padding: 25px 16px;

					.li-title {
						font-size: 18px;
						line-height: 25px;
						max-height: 50px;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.li-text {
						color: #495770;
						margin-top: 15px;
						line-height: 25px;
						font-size: 14px;
						height: 100px;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 4;
						-webkit-box-orient: vertical;
					}
				}

			}

			.li:hover {

				.img {
					animation: img-scale 0.2s linear forwards;
				}
			}

			@keyframes img-scale {
				0% {
					transform: scale(1);
				}

				100% {
					transform: scale(1.1);
				}
			}

		}
	}
</style>